<script setup>
import { onMounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import {
  getHouseInvestigation,
  getHouseRanking,
} from '../api.js'
import icon_house from '@/assets/imgs/ic_fwzs.png'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const getChartBarOption = (data) => {
  return {
    xAxis: {
      // max: 'dataMax',
      show: true,
    },
    grid: {
      top: '3%',
      left: '10%',
      right: '8%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'category',
      data: data.cityNames,
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      // max: 2 // only the largest 3 bars will be displayed
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        realtimeSort: true,
        name: '各城区危房数量',
        type: 'bar',
        barWidth: 10,
        data: data.value,
        showBackground: true,
        label: {
          show: false,
          position: 'right',
          valueAnimation: true
        }
      }
    ],
    legend: {
      show: false
    },
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c89' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c21' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    // animationDuration: 0,
    // animationDurationUpdate: 3000,
    // animationEasing: 'linear',
    // animationEasingUpdate: 'linear'
  }
}

const dangerousHouseChartBarRef = ref(null)
const updateDataRanking = (data) => {
  dangerousHouseChartBarRef.value?.updateOption(getChartBarOption(data))
}

const houseOverview = ref([])
const updateDataOverview = (data) => {
  houseOverview.value = data
}

const reqData = () => {
  Promise.all([
    getHouseInvestigation(),
    getHouseRanking()
  ])
  .then(([investigation, ranking]) => {
    if (investigation.success) {
      updateDataOverview(investigation.data)
    }
    if (ranking.success) {
      updateDataRanking(ranking.data)
    }
  })
}

onMounted(() => {
  reqData()
})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="危房排查" class="danagerous-house-total">
      <div class="total-wrap">
        <img class="icon" :src="icon_house" alt="">
        <div class="right">
          <div class="line">
            <span class="title">排除房屋数</span>
            <span class="value">{{ houseOverview['排查房屋数'] }}</span>
            <span class="unit">幢</span>
          </div>
          <div class="line">
            <span class="title">排查房屋面积</span>
            <span class="value">{{ houseOverview['排查房屋面积'] }}</span>
            <span class="unit">万平</span>
          </div>
          <div class="line">
            <span class="title">危房占比</span>
            <span class="value">{{ houseOverview['危房占比'] }}</span>
            <span class="unit">%</span>
          </div>
        </div>
      </div>
    </card>
    <card name="各城区危房数量" class="dangerous-house-list">
      <div class="chart">
        <draw-echarts
          ref="dangerousHouseChartBarRef"
          width="420"
          height="600"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  // .title-icon {
  //   display: inline-flex;
  //   background-repeat: no-repeat;
  //   background-size: 100% 100%;
  //   height: 61px;
  //   position: relative;
  //   bottom: 20px;
  //   // margin-top: 10px;
  // }

  // .house-total {
  //   height: 400px;
  //   margin-bottom: var(--card-margin-bottom);

  //   .head {
  //     background: linear-gradient(90deg, #1f3158 0%, #01153c 100%);
  //     width: 100%;
  //     height: 40px;
  //     line-height: 40px;
  //     display: flex;
  //     justify-content: space-between;
  //     color: #ffffff;

  //     .head-title {
  //       font-family: Source Han Sans SC;
  //       font-weight: 500;
  //       font-size: 16px;
  //       margin-left: 16px;
  //     }

  //     .head-value {
  //       font-family: Source Han Sans SC;
  //       font-weight: 500;
  //       font-size: 16px;
  //       margin-right: 10px;
  //       .value {
  //         font-size: 18px;
  //         color: #5db1ed;
  //       }
  //       .unit {
  //         font-size: 14px;
  //         margin-left: 10px;
  //       }
  //     }
  //   }

  // }

  .danagerous-house-total {
    height: 260px;
    margin-bottom: var(--card-margin-bottom);

    .total-wrap {
      display: flex;
      align-items: center;
      .icon {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
      }
      .right {
        flex: 1;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;

        .line {
          padding-left: 10px;
          line-height: 32px;
          width: 100%;
          background: linear-gradient(to right, #1F3156, #08142D);
          color: #fff;
          .title {
            width: 7em;
            display: inline-block;
          }
          
          .value {
            font-weight: bold;
            font-size: 20px;
          }

          .unit {
            font-size: 13px;
            color: #ccc;
            display: inline-block;
            margin-left: 3px;
          }
        }
      }
    }
  }

  .dangerous-house-list {
    height: 630px;
  }
}
</style>
